<template>
  <div ref="chartRef" style="width: 100%;height: 100%"></div>
</template>

<script>
import chartSource from "@/views/chart/ChartSource";

export default {
  name: "BarChart",
  mixins: [chartSource],
  methods: {
    initOptions() {
      const xAxis = []
      const yValues = []
      this.list.forEach(item => {
        xAxis.push(item.name)
        yValues.push(item.value)
      })
      this.suffixs.forEach(item => {
        if (!xAxis.includes(item)) {
          xAxis.push(item)
          yValues.push(0)
        }
      })
      this.options = {
        // 标题
        title: {
          text: '文件类型解析任务量',
          left: 'center'
        },
        // 弹出展示
        tooltip: {
          trigger: 'item',
          formatter: ' {b} : {c}'
        },
        xAxis: {
          type: 'category',
          data: xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            data: yValues,
            type: 'bar'
          }
        ]
      }
      this.loadSource()
    }
  }
}
</script>

<style scoped>

</style>
